<template>
  <div>

    <!--<a-row>
      <a-col :span="12">
        优惠率：<span>{{record.discountedRate}}&nbsp;%</span>
      </a-col>
      <a-col :span="12">
        优惠金额：<span>{{record.discountedMoney}}</span>
      </a-col>
    </a-row>
    <a-row style="margin-top: 3px;margin-bottom: 10px">
      <a-col :span="12">
        合计：<span>{{record.purchasePrice}}</span>
      </a-col>
      <a-col :span="12">
        优惠后金额：<span>{{record.discountedPurchasePrice}}</span>
      </a-col>
    </a-row>-->

    <div class="list">
      <van-list
        offset="100"
        finished-text="没有更多了"
        :immediate-check="false"
      >
        <div
          class="customer-list"
          v-for="(item,i) in materialData"
          :key="i"
        >
          <div>
            <div class="name">材料名称：{{ item.materialName || '无' }}</div>
            <div class="contact">
              <span>型号：{{ item.modelNumber || '无' }}</span>
            </div>
            <div class="contact">
              <span>规格：{{ item.specifications || '无' }}</span>
            </div>
            <div class="contact">
              <span>品牌：{{ item.brand || '无' }}</span>
            </div>
            <div class="contact">
              <span>成本价：{{ item.costPrice || '无' }}</span>
              <span style="margin-left: 20px">单价：{{ item.unitPrice || '无' }}</span>
            </div>
            <!--<div class="contact">
              <span>折扣率(%)：{{ item.discountRate || '无' }}</span>
              <span style="margin-left: 20px">折扣额：{{ item.discountMoney || '无' }}</span>
            </div>
            <div class="contact">
              <span>折后单价：{{ item.discountUnitPrice || '无' }}</span>
              <span style="margin-left: 20px;margin-right: 20px">数量：{{ item.materialNum || '无' }}</span>
              <span>小计：{{ item.subtotal || '无' }}</span>
            </div>-->
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
  export default {
    name: "otherOutDepositoryMaterialInfoTab",
    props: {
      materialData: {},
      record: {}
    },
    data() {
      return {
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';

  .editable-row-operations a {
    margin-right: 8px;
  }

  .tableHiddle {
    display: none;
  }

  /deep/ .van-dropdown-menu__bar{
    height: 30px;
    box-shadow: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
  }

  .list{
    overflow-y: scroll;
    height:calc(100vh - 250px);
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }
</style>